<!--
  3D Tilesets Component

  Working with 3D Tilesets for massive model datasets
-->

<template>
  <BaseCesiumViewer 
    ref="cesiumViewer" 
     
    @viewer-ready="onViewerReady"
  />
</template>

<script>
import { ref } from 'vue';
import BaseCesiumViewer from '../core/BaseCesiumViewer.vue';

export default {
  name: 'TilesetDemo',
  components: {
    BaseCesiumViewer
  },
  setup() {
    const cesiumViewer = ref(null);

    // This function is called when the Cesium viewer is ready
    const onViewerReady = async (payload) => {
      // Check if payload and viewer are valid
      if (!payload || !payload.viewer) {
        console.error('Viewer is not ready or payload is invalid');
        return;
      }
      
      const { viewer, Cesium } = payload;
      
      try {
        // Load a local 3D Tileset instead of online Cesium OSM Buildings
        const tileset = await Cesium.Cesium3DTileset.fromUrl('/SampleData/Cesium3DTiles/Tilesets/Tileset/tileset.json');
        viewer.scene.primitives.add(tileset);

        // Zoom to the tileset once it's ready
        viewer.zoomTo(tileset);

        // Add a custom 3D tileset if available
        // This would typically point to your own tileset
        /*
        const customTileset = new Cesium.Cesium3DTileset({
          url: '../assets/tilesets/my-tileset/tileset.json'
        });
        
        viewer.scene.primitives.add(customTileset);
        
        // Style the custom tileset
        customTileset.style = new Cesium.Cesium3DTileStyle({
          color: {
            conditions: [
              ['${height} > 100', 'color("red")'],
              ['${height} > 50', 'color("yellow")'],
              ['true', 'color("blue")']
            ]
          }
        });
        */

        console.log('3D Tilesets loaded successfully');
      } catch (error) {
        console.error('Error loading tilesets:', error);
      }
    };

    return {
      cesiumViewer,
      onViewerReady
    };
  }
};
</script>

<style scoped>
/* 
  Add any custom styles for your demo here
*/
</style>